import React from 'react';
import { Modal } from 'antd';
import ProForm, { ProFormText, ProFormRadio } from '@ant-design/pro-form';
import { TableListItem } from '../data';

export interface FormValueType extends Partial<TableListItem> {
  username?: string;
  password?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface CreateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values?: FormValueType) => Promise<void>;
  modalVisible: boolean;
  values: Partial<TableListItem> | null;
  isDetail?: boolean;
}

const CreateForm: React.FC<CreateFormProps> = ({
  isDetail,
  onCancel,
  modalVisible,
  values,
  onSubmit,
}) => {
  if (values?.password) values.password = '******';
  return (
    <Modal
      destroyOnClose
      title={!values ? '新建用户' : isDetail ? '用户详情' : '更新用户'}
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
      width={840}
    >
      <ProForm
        initialValues={values as TableListItem}
        onFinish={async (values: Partial<TableListItem>) => {
          !isDetail && onSubmit(values);
        }}
        {...(isDetail && { submitter: false })}
      >
        <ProFormText
          rules={[{ required: true, message: '请输入用户名!' }]}
          disabled={isDetail}
          label="用户名"
          name="username"
        />
        <ProFormText
          rules={[{ required: true, message: '请输入密码!' }]}
          disabled={isDetail}
          label="密码"
          name="password"
        />
        <ProFormText
          rules={[{ required: true, message: '请输入邮箱!' }]}
          disabled={isDetail}
          label="邮箱"
          name="email"
        />
        <ProFormRadio.Group
          name="access"
          disabled={isDetail}
          label="角色"
          rules={[{ required: true, message: '请选择角色!' }]}
          options={[
            {
              label: '管理员',
              value: 'admin',
            },
            {
              label: '用户',
              value: 'user',
            },
          ]}
        />
        <ProFormText
          // rules={[{ required: true, message: '请填写头像!' }]}
          disabled={isDetail}
          label="头像"
          name="avatar"
        />
      </ProForm>
    </Modal>
  );
};

export default CreateForm;
